<template>
  <div>
    <svg-icon class-name="table-icon" icon-class="table" @click="dialogVisible = true" />

    <el-dialog :visible.sync="dialogVisible" fullscreen="true" class="dialog">
      <div id="div" class="wrapper ">
        <div class="head">
          <h1>翔安智慧水务</h1>
        </div>
        <div class="contain">
          <el-row>
            <el-col :span="24" style="padding: 0.1rem">
              <div class="bar">
                <div class="barbox">
                  <ul class="clearfix">
                    <li class="pulll_left counter" style="width: 25%">
                      {{ supply | tofix(0) }}
                      <span style="font-size: 0.3rem"></span>
                    </li>
                    <li class="pulll_left counter" style="width: 25%">
                      {{ intaking | tofix(0) }}
                      <span style="font-size: 0.3rem"></span>
                    </li>
                    <li class="pulll_left counter" style="width: 25%">
                      {{ power | tofix(0) }}
                      <span style="font-size: 0.3rem"></span>
                    </li>
                    <li class="pulll_left counter" style="width: 25%">
                      {{ energy | tofix(0) }}
                      <span style="font-size: 0.3rem"></span>
                    </li>
                  </ul>
                </div>
                <div class="barbox2">
                  <ul class="clearfix">
                    <li class="pulll_left" style="width: 25%">供水量(m³)</li>
                    <li class="pulll_left" style="width: 25%">取水量(m³)</li>
                    <li class="pulll_left" style="width: 25%">电量(KW·h)</li>
                    <li class="pulll_left" style="width: 25%">能耗(KW·h/Km³)</li>
                  </ul>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" style="padding: 0.1rem 0.1rem 0px">
              <div class="boxall" style="height: 3.5rem">
                <div class="float" style="margin: 0.5rem 0 0.0 0.5rem">
                  <pie-chart :chart-data="pieChartDataElec" height="3rem" width="3rem"/>
                </div>
              </div>
            </el-col>
            <el-col :span="6" style="padding: 0.1rem 0.1rem 0px">
              <div class="boxall" style="height: 3.5rem">
                <div class="alltitle">出厂水</div>
                <ul class="listBoard">
                  <li>
                    <img :src="require('@/assets/img/svg/dycdpsliuliangfuwu.svg')" style="width:30px;height:28px" />
                    <div>原水浊度<bdi class="unit">NTU</bdi></div>
                    <span>{{ data[53] && data[53].value | tofix(2) }}</span>
                  </li>
                  <li>
                    <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                    <div>原水PH<bdi class="unit"></bdi></div>
                    <span>{{ data[54] && data[54].value | tofix(2) }}</span>
                  </li>
                  <li>
                    <img :src="require('@/assets/img/svg/浊度.svg')" style="width:30px;height:28px" />
                    <div>原水氨氮<bdi class="unit">mg/L</bdi></div>
                    <span>{{ data[51] && data[51].value | tofix(0) }}</span>
                  </li>
                  <li>
                    <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                    <div>原水总锰<bdi class="unit">mg/L</bdi></div>
                    <span>{{ data[52] && data[52].value | tofix(2) }}</span>
                  </li>
                  <li>
                    <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                    <div>原水COD<bdi class="unit">mg/L</bdi></div>
                    <span>{{ data[55] && data[55].value | tofix(2) }}</span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="6" style="padding: 0.1rem 0.1rem 0px">
              <div class="boxall" style="height: 3.5rem">
                <div class="alltitle">出厂水</div>
                <ul class="listBoard">
                  <li>
                    <img :src="require('@/assets/img/svg/dycdpsliuliangfuwu.svg')" style="width:30px;height:28px" />
                    <div>出厂余氯<bdi class="unit">mg/L</bdi></div>
                    <span>{{ data[63] && data[63].value | tofix(1) }}</span>
                  </li>
                  <li>
                    <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                    <div>1#出厂流量<bdi class="unit">m³/h</bdi></div>
                    <span>{{ rawData[115] && rawData[115].value | tofix(2) }}</span>
                  </li>
                  <li>
                    <img :src="require('@/assets/img/svg/浊度.svg')" style="width:30px;height:28px" />
                    <div>2#出厂流量<bdi class="unit">m³/h</bdi></div>
                    <span>{{ rawData[116] && rawData[116].value | tofix(2) }}</span>
                  </li>
                  <li>
                    <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                    <div>出厂浊度<bdi class="unit">NTU</bdi></div>
                    <span>{{ data[62] && data[62].value | tofix(2) }}</span>
                  </li>
                  <li>
                    <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                    <div>出厂PH<bdi class="unit"></bdi></div>
                    <span>{{ data[66] && data[66].value | tofix(2) }}</span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="6" style="padding: 0.1rem 0.1rem 0px">
              <div class="boxall" style="height: 3.5rem">
                <div class="float" style="margin: 0.5rem 0 0.0 0.5rem">
                  <pie-chart :chart-data="pieChartDataWater" height="3rem" width="3rem"/>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" style="padding: 0.1rem">
              <div class="boxall" style="height: 3.5rem">
                <line-chart :chart-data="lineChartData" height="3rem"/>
              </div>
            </el-col>
            <el-col :span="8" style="padding: 0.1rem">
              <div class="boxall" style="height: 3.5rem">
                <bar-chart :chart-data="barChartData1" height="3rem"/> 
              </div>
            </el-col>
            <el-col :span="8" style="padding: 0.1rem">
              <div class="boxall" style="height: 3.5rem">
                <!-- <bar-chart :chart-data="barChartData3" /> -->
                <line-chart1 :chart-data="lineChartData1" height="3rem"/>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="map centered">
        <div class="map1"><img :src="require('@/assets/img/翔安图片/images/lbx.png')"></div>
        <div class="map2"><img :src="require('@/assets/img/翔安图片/images/jt.png')"></div>
        <div class="map3"><img :src="require('@/assets/img/翔安图片/images/map.png')"></div>
        <div class="map4" id="map_1"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/resources/comon0.css";
import PieChart from '@/views/dashboard/PieChart2'
import BarChart from '@/views/dashboard/BarChart2'
import LineChart1 from '@/views/dashboard/LineChart'
import LineChart from '@/views/dashboard/LineChart2'
import { tofix } from "@/filters";
import { findAll } from '@/api/dispatch/runningState'
import { getRealDataAllList } from "@/api/water/realData";
import { get5EDay } from "@/api/water/reportMonth";
import { round } from "@/utils"
import { parseTime } from "@/utils/ruoyi";

const barChartData = {
  elect: {
    name: "近五天能耗对比",
    text: "近五天能耗对比",
    xAxis: ["1#泵", "2#泵", "3#泵", "4#泵", "5#泵"],
    data: [320, 332, 301, 334, 390],
  },
  water: {
    name: "近五天水量对比",
    text: "近五天水量对比",
    xAxis: ["1#泵", "2#泵", "3#泵", "4#泵", "5#泵"],
    data: [320, 332, 301, 334, 390],
  },
};

const pieChartData = {
  electric: {
    text: "电量占比",
    name: ["1期1#干式变压器", "1期2#干式变压器", "2期3#干式变压器", "2期4#干式变压器"],
    value: [320, 342, 350, 362],
  },
  water: {
    text: "水量占比",
    name: ["DN2000出厂水", "DN1800出厂水"],
    value: [320, 342],
  },
};
const lineChartData = {
  text: ["进水量", "出水量"],
  xAxis: ["03-28", "03-29", "03-30", "03-31", "04-01", "04-02", "04-03"],
  in: [100, 120, 161, 134, 105, 160, 165],
  out: [120, 82, 91, 154, 162, 140, 145]
};
const lineChartData1 = {
  text: ["加矾", "加氯"],
  xAxis: ["03-28", "03-29", "03-30", "03-31", "04-01", "04-02", "04-03"],
  in: [100, 120, 161, 134, 105, 160, 165],
  out: [120, 82, 91, 154, 162, 140, 145]
};

// 设置rem
const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName("html")[0];
  let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  htmlDom.style.fontSize = `${htmlWidth / 20}px`;
};
export default {
  name: 'Index',
  components: {
    PieChart,
    BarChart,
    LineChart,
    LineChart1
  },
  data() {
    return {
      dialogVisible: true,
      setHtmlFontSize: setHtmlFontSize,
      barChartData1: barChartData.elect,
      // private barChartData2 = barChartData.power;
      barChartData3: barChartData.water,
      pieChartDataElec: pieChartData.water,
      pieChartDataWater: pieChartData.electric,
      data: [],
      rawData: [],
      supply: undefined,
      intaking: undefined,
      power: undefined,
      energy: undefined,
      timer: null,
      lineChartData: lineChartData,
      lineChartData1: lineChartData1
    }
  },
  created() {
    window.onresize = this.setHtmlFontSize;
    this.setHtmlFontSize();
  },
  mounted() {
    this.getData();
    this.timer = setInterval(this.getData, 1000 * 30);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    document.getElementsByTagName("html")[0].style.fontSize = ""; // 重置rem
  },
  methods: {
    getData() {
      findAll().then((response) => {
        this.rawData = response.data;
      });
      get5EDay().then((response) => {
        const data = response.data;
        this.supply = data[0].a7 + data[0].a8
        this.intaking = data[0].a1 + data[0].a2 + data[0].a3
        this.power = data[0].a16 + data[0].a17 - data[0].a29 - data[0].a30 - data[0].a31 - data[0].a32 - data[0].a33 - data[0].a34 - data[0].a35
        this.energy = round(this.power / this.supply, 2)
        const bar = this.BarChartData(response.data)
        this.barChartData1.xAxis = bar.rtimeArr.reverse()
        this.barChartData1.data = bar.energyArr.reverse()
        this.barChartData3.data = bar.supplyArr.reverse()
        this.barChartData3.xAxis = bar.rtimeArr
        this.lineChartData.xAxis = bar.rtimeArr
        this.lineChartData.in = bar.inletArr
        this.lineChartData.out = bar.supplyArr
        this.lineChartData1.xAxis = bar.rtimeArr
        this.lineChartData1.in = bar.dosing1Arr
        this.lineChartData1.out = bar.dosing2Arr
      });
      getRealDataAllList().then((response) => {
        this.data = response.data
        const pie = this.pieChartData(response.data)
        this.pieChartDataElec.value = pie.energyArr
        this.pieChartDataWater.value = pie.supplyArr
      });
    },
    pieChartData(data) {
      let supplyArr = []
      let energyArr = []
      if (data[0] != null && data[0].value != null) {
        supplyArr.push(data[17].value)
        supplyArr.push(data[18].value)
        supplyArr.push(data[19].value)
        supplyArr.push(data[20].value)
        energyArr.push(data[6].value)
        energyArr.push(data[7].value)
      } else {
        supplyArr = [0, 0, 0]
        energyArr = [0, 0]
      }
      return { supplyArr, energyArr }
    },
    BarChartData(data) {
      const dosing1Arr = [] // 加矾
      const dosing2Arr = [] // 加氯
      const inletArr = []
      const supplyArr = []
      const energyArr = []
      const rtimeArr = []
      if (data[0] != null && data[0].a7 != null) {
        let dosing1 = data[0].a9 + data[0].a10 + data[0].a112 + data[0].a113 + data[0].a115
        let dosing2 = data[0].a11 + data[0].a12 + data[0].a13 + data[0].a14 + data[0].a15
         + data[0].a102 + data[0].a109 + data[0].a110 + data[0].a111 + data[0].a112 + data[0].a117 + data[0].a119
        let inlet = data[0].a1 + data[0].a2 + data[0].a3
        let supply = data[0].a7 + data[0].a8
        let power = data[0].a16 + data[0].a17 - data[0].a27 - data[0].a28 - data[0].a29 - data[0].a30 - data[0].a31 - data[0].a32 - data[0].a33
        let energy = round(power / supply, 2)
        dosing1Arr.push(round(dosing1, 2))
        dosing2Arr.push(round(dosing2, 2))
        inletArr.push(inlet)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[0].rtime, "{m}-{d}"))
      }
      else {
        dosing1Arr.push(0)
        dosing2Arr.push(0)
        inletArr.push(0)
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      if (data[1] != null && data[1].a7 != null) {
        let dosing1 = data[1].a9 + data[1].a10 + data[1].a112 + data[1].a113 + data[1].a115
        let dosing2 = data[1].a11 + data[1].a12 + data[1].a13 + data[1].a14 + data[1].a15
         + data[1].a102 + data[1].a109 + data[1].a110 + data[1].a111 + data[1].a112 + data[1].a117 + data[1].a119
        let inlet = data[1].a1 + data[1].a2 + data[1].a3
        let supply = data[1].a7 + data[1].a8
        let power = data[1].a16 + data[1].a17 - data[1].a27 - data[1].a28 - data[1].a29 - data[1].a30 - data[1].a31 - data[1].a32 - data[1].a33
        let energy = round(power / supply, 2)
        dosing1Arr.push(round(dosing1, 2))
        dosing2Arr.push(round(dosing2, 2))
        inletArr.push(inlet)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[1].rtime, "{m}-{d}"))
      }
      else {
        dosing1Arr.push(0)
        dosing2Arr.push(0)
        inletArr.push(0)
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      if (data[2] != null && data[2].a7 != null) {
        let dosing1 = data[2].a9 + data[2].a10 + data[2].a112 + data[2].a113 + data[2].a115
        let dosing2 = data[2].a11 + data[2].a12 + data[2].a13 + data[2].a14 + data[2].a15
         + data[2].a102 + data[2].a109 + data[2].a110 + data[2].a111 + data[2].a112 + data[2].a117 + data[2].a119
        let inlet = data[2].a1 + data[2].a2 + data[2].a3
        let supply = data[2].a7 + data[2].a8
        let power = data[2].a16 + data[2].a17 - data[2].a27 - data[2].a28 - data[2].a29 - data[2].a30 - data[2].a31 - data[2].a32 - data[2].a33
        let energy = round(power / supply, 2)
        dosing1Arr.push(round(dosing1, 2))
        dosing2Arr.push(round(dosing2, 2))
        inletArr.push(inlet)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[2].rtime, "{m}-{d}"))
      }
      else {
        dosing1Arr.push(0)
        dosing2Arr.push(0)
        inletArr.push(0)
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      if (data[3] != null && data[3].a7 != null) {
        let dosing1 = data[3].a9 + data[3].a10 + data[3].a112 + data[3].a113 + data[3].a115
        let dosing2 = data[3].a11 + data[3].a12 + data[3].a13 + data[3].a14 + data[3].a15
         + data[3].a102 + data[3].a109 + data[3].a110 + data[3].a111 + data[3].a112 + data[3].a117 + data[3].a119
        let inlet = data[3].a1 + data[3].a2 + data[3].a3
        let supply = data[3].a7 + data[3].a8
        let power = data[3].a16 + data[3].a17 - data[3].a27 - data[3].a28 - data[3].a29 - data[3].a30 - data[3].a31 - data[3].a32 - data[3].a33
        let energy = round(power / supply, 2)
        dosing1Arr.push(round(dosing1, 2))
        dosing2Arr.push(round(dosing2, 2))
        inletArr.push(inlet)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[3].rtime, "{m}-{d}"))
      }
      else {
        dosing1Arr.push(0)
        dosing2Arr.push(0)
        inletArr.push(0)
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      if (data[4] != null && data[4].a7 != null) {
        let dosing1 = data[4].a9 + data[4].a10 + data[4].a112 + data[4].a113 + data[4].a115
        let dosing2 = data[4].a11 + data[4].a12 + data[4].a13 + data[4].a14 + data[4].a15
         + data[4].a102 + data[4].a109 + data[4].a110 + data[4].a111 + data[4].a112 + data[4].a117 + data[4].a119
        let inlet = data[4].a1 + data[4].a2 + data[4].a3
        let supply = data[4].a7 + data[4].a8
        let power = data[4].a16 + data[4].a17 - data[4].a27 - data[4].a28 - data[4].a29 - data[4].a30 - data[4].a31 - data[4].a32 - data[4].a33
        let energy = round(power / supply, 2)
        dosing1Arr.push(round(dosing1, 2))
        dosing2Arr.push(round(dosing2, 2))
        inletArr.push(inlet)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[4].rtime, "{m}-{d}"))
      }
      else {
        dosing1Arr.push(0)
        dosing2Arr.push(0)
        inletArr.push(0)
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      return { dosing1Arr, dosing2Arr, inletArr, supplyArr, energyArr, rtimeArr }
    }
  }
}
</script>
<style>
.dialog .el-dialog {
  background: #000d4a top;
  background-size: cover;
  max-width: 100%;
  max-height: 100%;
}

.dialog .el-dialog.is-fullscreen {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  height: 100%;
  overflow: auto;
}

* {
  font-size: 0.15rem;
}

#div {
  color: #666;
  font-size: 0.1rem;
}

.map {
  width: 100%;
  height: 900px;
}

.contain {
  padding: 0 0.1rem 0 0.1rem;
}

.alltitle {
  font-size: 0.3rem;
}

.listBoard {
  padding-top: 0.2rem;
}

.listBoard li {
  height: 0.5rem;
}

.listBoard li div:first-child {
  display: inline-block;
  width: 0.5rem;
}

.listBoard li div:nth-child(2) {
  font-size: 0.28rem;
  color: hsla(0, 0%, 100%, 0.7);
  display: inline-block;
  width: 2.5rem;
}

.listBoard li span {
  font-family: electronicFont;
  color: #ffeb7b;
  font-size: 0.4rem;
}

.float {
  display: inline;
  float: left;
  width: 200px;
}

.unit {
  font-size: 0.2rem;
}

div ul {
  padding-left: 0px;
}

.map {
  margin-left: -10%;
  margin-top: -6%;
  position: relative;
  z-index: 9;
  opacity: 0.7;
}

.map4 {
  position: relative;
  z-index: 5;
}

.map1,
.map2,
.map3 {
  position: absolute;
}

.map1 {
  z-index: 2;
  animation: myfirst2 15s infinite linear;
}

.map2 {
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}

.map3 {
  z-index: 1;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  z-index: 2;
  transform: translate(-50%, -50%);
}
</style>


